// ActionSelector.tsx
import React, { useState } from 'react';
import { AnimationAction } from './types';

interface ActionSelectorProps {
    actions: AnimationAction;
    onSelect: (actionId: string) => void;
}

const ActionSelector: React.FC<ActionSelectorProps> = ({ actions, onSelect }) => {
    const [selectedAction, setSelectedAction] = useState<string>('');

    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const actionId = e.target.value;
        setSelectedAction(actionId);
        onSelect(actionId);
    };

    // 递归渲染动作选项
    const renderOptions = (action: AnimationAction, level = 0) => {
        const indent = '—'.repeat(level * 2);
        return [
            <option key={action.id} value={action.id}>
                {indent} {action.name}
            </option>,
            ...(action.children?.flatMap(child => renderOptions(child, level + 1)) || [],
    ];
    };

    return (
        <div className="action-selector">
            <label htmlFor="action-select">选择动作: </label>
            <select
                id="action-select"
                value={selectedAction}
                onChange={handleChange}
                className="action-dropdown"
            >
                <option value="">-- 请选择动作 --</option>
                {renderOptions(actions)}
            </select>
        </div>
    );
};

export default ActionSelector;